<template>
  <section class="m-istyle">
    <dl @mouseover="over">
      <dt>有格调</dt>
      <dd
        :class="{active:kind==='all'}"
        kind="all"
        keyword="景点">全部</dd>
      <dd
        :class="{active:kind==='part'}"
        kind="part"
        keyword="美食">约会聚餐</dd>
      <dd
        :class="{active:kind==='spa'}"
        kind="spa"
        keyword="丽人">丽人SPA</dd>
      <dd
        :class="{active:kind==='movie'}"
        kind="movie"
        keyword="电影">电影演出</dd>
      <dd
        :class="{active:kind==='travel'}"
        kind="travel"
        keyword="旅游">品质出游</dd>
    </dl>
    <ul class="ibody">
      <li
        v-for="item in cur"
        :key="item.title">
        <el-card
          :body-style="{ padding: '0px' }"
          shadow="never">
          <img
            :src="item.img"
            class="image">
          <ul class="cbody">
            <li class="title">{{ item.title }}</li>
            <li class="pos"><span>{{ item.pos }}</span></li>
            <li class="price">￥<em>{{ item.price }}</em><span>/起</span></li>
          </ul>
        </el-card>
      </li>
    </ul>
  </section>
</template>
<script>
  export default {
    data: () => {
      return {
        kind: 'all',
        list: {
          all: [{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p1.meituan.net/poi/677f3d8bddf1cbf04e4ac79d52b4a81a316341.png@368w_208h_1e_1c',
            url: '//abc.com'
          },{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p1.meituan.net/poi/677f3d8bddf1cbf04e4ac79d52b4a81a316341.png@368w_208h_1e_1c',
            url: '//abc.com'
          },{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p1.meituan.net/poi/677f3d8bddf1cbf04e4ac79d52b4a81a316341.png@368w_208h_1e_1c',
            url: '//abc.com'
          },{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p1.meituan.net/poi/677f3d8bddf1cbf04e4ac79d52b4a81a316341.png@368w_208h_1e_1c',
            url: '//abc.com'
          },{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p1.meituan.net/deal/201203/31/002.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          }],
          part: [{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p1.meituan.net/deal/201203/31/002.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          },{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p1.meituan.net/deal/201203/31/002.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          },{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p1.meituan.net/deal/201203/31/002.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          },{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p1.meituan.net/deal/201203/31/002.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          },{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p1.meituan.net/deal/201203/31/002.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          },{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p1.meituan.net/deal/201203/31/002.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          },{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p0.meituan.net/merchantpic/b5bc200ff96056aa58e2441c37b0097d58192.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          }],
          spa: [{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p0.meituan.net/merchantpic/b5bc200ff96056aa58e2441c37b0097d58192.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          },{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p0.meituan.net/merchantpic/b5bc200ff96056aa58e2441c37b0097d58192.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          },{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p0.meituan.net/merchantpic/b5bc200ff96056aa58e2441c37b0097d58192.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          },{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p0.meituan.net/merchantpic/b5bc200ff96056aa58e2441c37b0097d58192.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          }],
          movie: [{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p0.meituan.net/merchantpic/b5bc200ff96056aa58e2441c37b0097d58192.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          },{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p0.meituan.net/merchantpic/b5bc200ff96056aa58e2441c37b0097d58192.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          },{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p0.meituan.net/merchantpic/b5bc200ff96056aa58e2441c37b0097d58192.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          },{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p0.meituan.net/merchantpic/b5bc200ff96056aa58e2441c37b0097d58192.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          },{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p0.meituan.net/merchantpic/b5bc200ff96056aa58e2441c37b0097d58192.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          },{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p0.meituan.net/merchantpic/b5bc200ff96056aa58e2441c37b0097d58192.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          }],
          travel: [{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p0.meituan.net/merchantpic/b5bc200ff96056aa58e2441c37b0097d58192.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          },{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p0.meituan.net/merchantpic/b5bc200ff96056aa58e2441c37b0097d58192.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          },{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p0.meituan.net/merchantpic/b5bc200ff96056aa58e2441c37b0097d58192.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          },{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p0.meituan.net/merchantpic/b5bc200ff96056aa58e2441c37b0097d58192.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          },{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p0.meituan.net/merchantpic/b5bc200ff96056aa58e2441c37b0097d58192.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          },{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p0.meituan.net/merchantpic/b5bc200ff96056aa58e2441c37b0097d58192.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          },{
            title: '日升昌酒店',
            pos: '学校周边',
            price: 530,
            img: '//p0.meituan.net/merchantpic/b5bc200ff96056aa58e2441c37b0097d58192.jpg@368w_208h_1e_1c',
            url: '//abc.com'
          }]
        }
      }
    },
    computed: {
      cur: function () {
        return this.list[this.kind]
      }
    },
    // async mounted(){
    //   let self=this;
    //   let {status,data:{count,pois}}=await self.$axios.get('/search/resultsByKeywords',{
    //     params:{
    //       keyword:'景点',
    //       city:self.$store.state.geo.position.city
    //     }
    //   })
    //   if(status===200&&count>0){
    //     let r= pois.filter(item=>item.photos.length).map(item=>{
    //       return {
    //         title:item.name,
    //         pos:item.type.split(';')[0],
    //         price:item.biz_ext.cost||'暂无',
    //         img:item.photos[0].url,
    //         url:'//abc.com'
    //       }
    //     })
    //     self.list[self.kind]=r.slice(0,9)
    //   }else{
    //     self.list[self.kind]=[]
    //   }
    // },
    methods: {
      over: async function (e) {
        let dom = e.target
        let tag = dom.tagName.toLowerCase()
        let self = this
        if (tag === 'dd') {
          this.kind = dom.getAttribute('kind')
          let keyword = dom.getAttribute('keyword')
          let {status,data:{count,pois}}=await self.$axios.get('/search/resultsByKeywords',{
            params:{
              keyword,
              city:self.$store.state.geo.position.city
            }
          })
          if(status===200&&count>0){
            let r= pois.filter(item=>item.photos.length).map(item=>{
              return {
                title:item.name,
                pos:item.type.split(';')[0],
                price:item.biz_ext.cost||'暂无',
                img:item.photos[0].url,
                url:'//abc.com'
              }
            })
            self.list[self.kind]=r.slice(0,9)
          }else{
            self.list[self.kind]=[]
          }
        }
      }
    }
  }
</script>
<style lang="scss">
  @import "../../assets/css/index/artistic.scss";
</style>
